<div class="right_title">
  <img class="title_arrow" src="assets/images/title_arrow.png">
  <div class="title_txt">校本课程设置
  </div>
</div>
<div class="right_content" id="cwpt" style="padding:5px;">
  <!-- 内容区域开始 -->
  <div>
    <hr>
    <button type="button" class="btn btn-primary" (click)="xjkc(xjkcmodal)">新建课程</button>
    <hr>
    <span>说明：课程只有在“选课阶段”状态下，学生可进行选课；在“进行中”状态下，教师可添加课堂评价，学生考勤等操作；在“已结束”状态下，教师可进行结课评价。</span>
    <hr>
  </div>

  <ngx-table [configuration]="configuration" [data]="data" [columns]="columns">
    <ng-template let-row>
      <td>
        <div class="font-small">
          {{row.Id}}
        </div>
      </td>
      <td>
        <div class="font-small">
          {{row.name}}
        </div>
      </td>
      <td>
        <span class="font-small">{{row.username}}</span>
      </td>
      <td>
        <span class="font-small">{{row.rs}}</span>
      </td>
      <td>
          <span class="font-small">{{row.kssj}}</span>
        </td>
        <td>
            <span class="font-small">{{row.jssj}}</span>
          </td>
          <td>
              <span class="font-small">{{row.zt | zt}}</span>
            </td>
      <td>
        <button class="btn btn-warning btn-xs" (click)=bj(row.Id,bjkcmodal)>编辑
        </button>
        <button class="btn btn-danger btn-xs" (click)=del(row.Id)>删除
        </button>
      </td>
    </ng-template>
  </ngx-table>
</div>
<!-- 新建课程 -->
<ng-template #xjkcmodal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">新建课程</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
    
  </div>
  <div class="modal-body">
    <form [formGroup]="formModel" class="form-horizontal" role="form" (submit)="xjkc_tj()">
      <div class="form-group">
        <label class="col-md-2 control-label">
          课程名称
        </label>
        <div class="col-md-10">
          <input formControlName="name" type="text" class="form-control" placeholder="必填" [class.hasError]="formModel.get('name').invalid && formModel.get('name').touched"
          />
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">
          开课时间
        </label>
        <div class="col-md-10">
          <div class="input-group">
              <input formControlName="kksj" class="form-control" #drp="bsDaterangepicker" bsDaterangepicker >
            <span class="input-group-btn">
                <a class="btn btn-default" (click)="drp.toggle()">选择日期</a>
                  </span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">
          人数上限
        </label>
        <div class="col-md-10">
          <input formControlName="rs" type="text" class="form-control" placeholder="必填" [class.hasError]="formModel.get('rs').invalid && formModel.get('rs').touched"
          />
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">
          讲师设置
        </label>
        <div class="col-md-10">
          <div style="text-align: center;margin-top: 15px; height:180px">
            <img style="max-height: 180px;" [class.hasError]="formModel.get('jsid').invalid && formModel.get('js').touched" *ngIf="ifimg" class="img-thumbnail" height="180" width="180" [src]="jsimage" onError=" this.onerror=null;this.src='assets/images/jsimg/moren2.jpg';">
            <p>{{dqjs['username']}}</p>
          </div>
          <a (click)="xzjs(xzjsmodal)" style="float: right;" class="btn btn-info btn-xs">选择讲师</a>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">
          讲师介绍
        </label>
        <div class="col-md-10">
          <textarea class="form-control" rows="3" formControlName="jsjs" class="form-control" placeholder="必填" [class.hasError]="formModel.get('jsjs').invalid && formModel.get('jsjs').touched">
                    </textarea>
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-2 control-label">
          课程介绍
        </label>
        <div class="col-md-10">
          <textarea class="form-control" rows="3" formControlName="js" class="form-control" placeholder="必填" [class.hasError]="formModel.get('js').invalid && formModel.get('js').touched">
                      </textarea>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">
          课程状态
        </label>
        <div class="col-md-10">
              <label class="radio-inline">
                <input formControlName="zt" type="radio" name="zt" value="1">选课阶段
              </label>
              <label class="radio-inline">
                <input formControlName="zt" type="radio" name="zt" value="2">课程进行
              </label>
              <label class="radio-inline">
                <input formControlName="zt" type="radio" name="zt" value="3">课程结束
              </label>
        </div>
      </div>
      <div class="modal-footer">
        <a class="btn btn-warning" style="float: left;" (click)="xjkcqx()">取消</a>
        <button type="submit" class="btn btn-success" style="cursor: pointer" [disabled]="formModel.invalid" style="float: left;">确认添加</button>
      </div>
    </form>
  </div>
</ng-template>

<!-- 选择讲师 -->
<ng-template #xzjsmodal>
  <div style="background:#f8f9f1;">
    <div class="modal-header">
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalXzjs.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <hr>
      <input class="form-control" placeholder="输入姓名或姓名中包含的字" [(ngModel)]="ss_name" style="width: 200px;display:inline;margin-right: 5px;">
      <button type="button" class="btn btn-primary" (click)="ssyh()">搜索</button>
      <hr>
      <div style="height: 550px;overflow-y:auto;overflow-x: hidden;">
        <table class="table table-bordered" style="width: 800px;">
          <thead>
            <tr>
              <th>用户ID</th>
              <th>姓名</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let x of users;">
              <td>{{x.Id }}</td>
              <td>{{ x.username }}</td>
              <td>
                <button type="button" class="btn btn-danger btn-xs" (click)="swjs(x)">选择</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="modal-footer">
      <a class="btn btn-warning" style="float: left;" (click)="xzjsqx()">取消</a>
    </div>

  </div>
</ng-template>

<!-- 编辑课程 -->
<ng-template #bjkcmodal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">编辑课程</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalBjkc.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form [formGroup]="formModel" class="form-horizontal" role="form" (submit)="bjkc_tj()">
      <div class="form-group">
        <label class="col-md-2 control-label">
          课程名称
        </label>
        <div class="col-md-10">
          <input formControlName="name" type="text" class="form-control" placeholder="必填" [class.hasError]="formModel.get('name').invalid && formModel.get('name').touched"
          />
        </div>
      </div>
      <div class="form-group">
          <label class="col-md-2 control-label">
            开课时间
          </label>
          <div class="col-md-10">
            <div class="input-group">
                <input formControlName="kksj" class="form-control" #drp="bsDaterangepicker" bsDaterangepicker>
              <span class="input-group-btn">
                  <a class="btn btn-default" (click)="drp.toggle()">选择日期</a>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">
              人数上限
            </label>
            <div class="col-md-10">
              <input formControlName="rs" type="text" class="form-control" placeholder="必填" [class.hasError]="formModel.get('rs').invalid && formModel.get('rs').touched"
              />
            </div>
          </div>
      <div class="form-group">
        <label class="col-md-2 control-label">
          讲师设置
        </label>
        <div class="col-md-10">
          <div style="text-align: center;margin-top: 15px; height:180px">
            <img style="max-height: 180px;"  [class.hasError]="formModel.get('jsid').invalid && formModel.get('js').touched" *ngIf="ifimg" class="img-thumbnail" height="180" width="180"  [src]="jsimage" onError=" this.onerror=null;this.src='assets/images/jsimg/moren2.jpg';">
            <p>{{dqjs['username']}}</p>
          </div>
          <a (click)="xzjs(xzjsmodal)" style="float: right;" class="btn btn-info btn-xs">选择讲师</a>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">
          讲师介绍
        </label>
        <div class="col-md-10">
          <textarea class="form-control" rows="3" formControlName="jsjs" class="form-control" placeholder="必填" [class.hasError]="formModel.get('jsjs').invalid && formModel.get('jsjs').touched">
                    </textarea>
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-2 control-label">
          课程介绍
        </label>
        <div class="col-md-10">
          <textarea class="form-control" rows="3" formControlName="js" class="form-control" placeholder="必填" [class.hasError]="formModel.get('js').invalid && formModel.get('js').touched">
          </textarea>
        </div>
      </div>
      <div class="form-group">
          <label class="col-md-2 control-label">
            课程状态
          </label>
          <div class="col-md-10">
                <label class="radio-inline">
                  <input formControlName="zt" type="radio" name="zt" value="1">选课阶段
                </label>
                <label class="radio-inline">
                  <input formControlName="zt" type="radio" name="zt" value="2">课程进行
                </label>
                <label class="radio-inline">
                  <input formControlName="zt" type="radio" name="zt" value="3">课程结束
                </label>
          </div>
        </div>
      <div class="modal-footer">
        <a class="btn btn-warning" style="float: left;" (click)="bjkcqx()">取消</a>
        <button type="submit" class="btn btn-success" style="cursor: pointer" [disabled]="formModel.invalid" style="float: left;">确认修改</button>
      </div>
    </form>
  </div>
</ng-template>